<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6a11cb;
            --secondary: #2575fc;
            --accent: #ff007a;
            --glass: rgba(255, 255, 255, 0.75);
            --glass-border: rgba(255, 255, 255, 0.4);
            --text: #2c3e50;
            --text-light: #666;
            --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            
            /* 分类颜色 */
            --cat-work: #5d55fa;
            --cat-life: #00b894;
            --cat-urgent: #ff7675;
        }

        * { box-sizing: border-box; outline: none; }

        body {
            margin: 0;
            font-family: 'Segoe UI', 'PingFang SC', sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 动态流体背景 */
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            overflow: hidden;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* --- 主容器：磨砂玻璃风格 --- */
        .app-container {
            width: 95%;
            max-width: 450px;
            height: 80vh;
            max-height: 800px;
            background: var(--glass);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 24px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            padding: 30px;
            position: relative;
            transition: transform 0.3s;
        }

        /* 移动端适配优化 */
        @media (max-width: 480px) {
            .app-container {
                height: 90vh;
                padding: 20px;
            }
            .title { font-size: 24px; }
            .task-item { padding: 12px; }
            .checkbox { width: 20px; height: 20px; margin-right: 10px; }
        }

        .app-container:hover { transform: translateY(-5px); }

        /* --- 头部统计区 --- */
        .header { margin-bottom: 25px; }
        
        .date-display { font-size: 14px; color: var(--text-light); font-weight: 600; letter-spacing: 1px; }
        .title { font-size: 28px; color: var(--text); margin: 5px 0 15px 0; font-weight: 800; }

        .progress-container {
            background: rgba(0,0,0,0.05);
            height: 10px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            border-radius: 10px;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 10px rgba(106, 17, 203, 0.4);
        }
        .stats-text { font-size: 12px; color: var(--text-light); margin-top: 5px; display: flex; justify-content: space-between; }

        /* --- 输入区域 --- */
        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            position: relative;
        }

        #task-input {
            flex: 1;
            padding: 15px;
            border: 2px solid transparent;
            border-radius: 12px;
            background: rgba(255,255,255,0.6);
            font-size: 15px;
            transition: all 0.3s;
        }
        #task-input:focus {
            background: #fff;
            border-color: var(--secondary);
            box-shadow: 0 0 15px rgba(37, 117, 252, 0.2);
            transform: scale(1.02);
        }

        /* 分类选择器 */
        .category-select {
            position: absolute;
            right: 65px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 18px;
            color: var(--primary);
            z-index: 2;
        }
        
        #add-btn {
            width: 50px;
            background: var(--primary);
            border: none;
            border-radius: 12px;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
        }
        #add-btn:hover { background: var(--secondary); transform: rotate(90deg); }
        #add-btn:active { transform: scale(0.9); }

        /* --- 过滤器 --- */
        .filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding-bottom: 10px;
        }
        .filter-btn {
            background: none;
            border: none;
            color: var(--text-light);
            font-weight: 600;
            cursor: pointer;
            position: relative;
            padding-bottom: 5px;
            transition: color 0.3s;
        }
        .filter-btn.active { color: var(--primary); }
        .filter-btn.active::after {
            content: '';
            position: absolute;
            bottom: -11px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary);
            border-radius: 3px;
        }

        /* --- 任务列表 --- */
        .task-list {
            flex: 1;
            overflow-y: auto;
            padding-right: 5px;
        }
        /* 滚动条美化 */
        .task-list::-webkit-scrollbar { width: 4px; }
        .task-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }

        .task-item {
            background: rgba(255,255,255,0.6);
            margin-bottom: 12px;
            padding: 15px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            animation: slideIn 0.4s ease forwards;
            position: relative;
            overflow: hidden;
            border-left: 4px solid transparent;
        }

        .task-item:hover {
            background: rgba(255,255,255,0.9);
            transform: scale(1.02);
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        /* 动态进入动画 */
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 动态删除动画 */
        .task-item.fade-out {
            transform: translateX(100%);
            opacity: 0;
        }

        /* 选中框 */
        .checkbox {
            width: 22px;
            height: 22px;
            border: 2px solid var(--primary);
            border-radius: 50%;
            margin-right: 15px;
            cursor: pointer;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
        }
        .task-item.completed .checkbox {
            background: var(--primary);
            border-color: var(--primary);
        }
        .checkbox::after {
            content: '✔';
            color: white;
            font-size: 14px;
            opacity: 0;
            transform: scale(0);
            transition: all 0.2s;
        }
        .task-item.completed .checkbox::after { opacity: 1; transform: scale(1); }

        /* 文本 */
        .task-text { flex: 1; font-size: 16px; color: var(--text); transition: all 0.3s; word-break: break-all; }
        .task-item.completed .task-text {
            text-decoration: line-through;
            color: #aaa;
        }

        /* 分类标签 */
        .tag {
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 20px;
            color: white;
            margin-right: 10px;
            text-transform: uppercase;
            font-weight: bold;
        }
        .tag.work { background: var(--cat-work); box-shadow: 0 2px 5px rgba(93, 85, 250, 0.4); }
        .tag.life { background: var(--cat-life); box-shadow: 0 2px 5px rgba(0, 184, 148, 0.4); }
        .tag.urgent { background: var(--cat-urgent); box-shadow: 0 2px 5px rgba(255, 118, 117, 0.4); }

        /* 删除按钮 */
        .delete-btn {
            background: transparent;
            border: none;
            color: #ff7675;
            cursor: pointer;
            opacity: 0;
            transition: all 0.3s;
            font-size: 16px;
        }
        .task-item:hover .delete-btn { opacity: 1; }
        .delete-btn:hover { transform: scale(1.2); color: #d63031; }

        /* --- 爆炸特效粒子 (Confetti) --- */
        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background-color: #f00;
            animation: fall 3s linear forwards;
            z-index: 999;
            pointer-events: none;
        }
        @keyframes fall {
            to { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }

    </style>
</head>
<body>

    <div class="app-container">
        <div class="header">
            <div class="date-display" id="date-display">Loading date...</div>
            <h1 class="title">我的待办</h1>
            
            <div class="progress-container">
                <div class="progress-bar" id="progress-bar"></div>
            </div>
            <div class="stats-text">
                <span id="progress-text">0% 已完成</span>
                <span id="active-count">0 待办</span>
            </div>
        </div>

        <div class="input-group">
            <input type="text" id="task-input" placeholder="添加新任务...">
            
            <select id="category-select" class="category-select" style="outline:none; border:none;">
                <option value="life">🌱</option>
                <option value="work">💼</option>
                <option value="urgent">🔥</option>
            </select>

            <button id="add-btn"><i class="fas fa-plus"></i></button>
        </div>

        <div class="filters">
            <button class="filter-btn active" data-filter="all" onclick="filterTasks('all')">全部</button>
            <button class="filter-btn" data-filter="active" onclick="filterTasks('active')">进行中</button>
            <button class="filter-btn" data-filter="completed" onclick="filterTasks('completed')">已完成</button>
        </div>

        <div class="task-list" id="task-list">
            </div>
    </div>

    <script>
        // ================= 数据与状态 =================
        let tasks = JSON.parse(localStorage.getItem('auroraTasks')) || [];
        let currentFilter = 'all';

        const taskListEl = document.getElementById('task-list');
        const inputEl = document.getElementById('task-input');
        const catSelectEl = document.getElementById('category-select');
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');
        const activeCountEl = document.getElementById('active-count');
        const dateDisplay = document.getElementById('date-display');

        // ================= 初始化 =================
        function init() {
            updateDate();
            render();
        }

        function updateDate() {
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            dateDisplay.innerText = new Date().toLocaleDateString('zh-CN', options);
        }

        // ================= 核心功能 =================
        
        function addTask() {
            const text = inputEl.value.trim();
            if (!text) return inputEl.focus();

            const newTask = {
                id: Date.now(),
                text: text,
                completed: false,
                category: catSelectEl.value // life, work, urgent
            };

            tasks.unshift(newTask); // 加到最前面
            inputEl.value = '';
            saveAndRender();
        }

        function toggleTask(id) {
            const task = tasks.find(t => t.id === id);
            if (task) {
                task.completed = !task.completed;
                if (task.completed) {
                    triggerConfetti(); // 触发庆祝特效
                }
                saveAndRender();
            }
        }

        function deleteTask(id, btnElement) {
            // 找到对应的 DOM 元素添加删除动画
            const item = btnElement.closest('.task-item');
            item.classList.add('fade-out');
            
            // 等待动画结束再移除数据
            setTimeout(() => {
                tasks = tasks.filter(t => t.id !== id);
                saveAndRender();
            }, 400);
        }

        // ================= 渲染与UI =================

        function filterTasks(filterType) {
            currentFilter = filterType;
            
            // 更新按钮状态
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.filter === filterType) {
                    btn.classList.add('active');
                }
            });
            
            render();
        }

        function render() {
            taskListEl.innerHTML = '';

            const filteredTasks = tasks.filter(task => {
                if (currentFilter === 'active') return !task.completed;
                if (currentFilter === 'completed') return task.completed;
                return true;
            });

            // 延迟渲染以触发交错动画 (stagger animation)
            filteredTasks.forEach((task, index) => {
                const li = document.createElement('div');
                li.className = `task-item ${task.completed ? 'completed' : ''}`;
                // 为每个项目设置不同的动画延迟，产生流水般的效果
                li.style.animationDelay = `${index * 0.05}s`;
                
                // 根据分类确定标签样式
                let tagHtml = '';
                if (task.category === 'work') tagHtml = '<span class="tag work">工作</span>';
                else if (task.category === 'life') tagHtml = '<span class="tag life">生活</span>';
                else if (task.category === 'urgent') tagHtml = '<span class="tag urgent">紧急</span>';

                li.innerHTML = `
                    <div class="checkbox" onclick="toggleTask(${task.id})"></div>
                    ${tagHtml}
                    <span class="task-text">${task.text}</span>
                    <button class="delete-btn" onclick="deleteTask(${task.id}, this)">
                        <i class="fas fa-trash"></i>
                    </button>
                `;
                taskListEl.appendChild(li);
            });

            updateStats();
        }

        function updateStats() {
            const total = tasks.length;
            const completed = tasks.filter(t => t.completed).length;
            const active = total - completed;
            const percent = total === 0 ? 0 : Math.round((completed / total) * 100);

            progressBar.style.width = `${percent}%`;
            progressText.innerText = `${percent}% 已完成`;
            activeCountEl.innerText = `${active} 待办`;
            
            localStorage.setItem('auroraTasks', JSON.stringify(tasks));
        }

        function saveAndRender() {
            updateStats(); // 这里面包含了 save
            render();
        }

        // ================= 酷炫动效：彩带爆炸 (Confetti) =================
        function triggerConfetti() {
            const colors = ['#ff007a', '#6a11cb', '#2575fc', '#f1c40f', '#2ecc71'];
            
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                
                // 随机位置、颜色、速度
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.top = -10 + 'px';
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.animationDuration = (Math.random() * 2 + 1) + 's';
                
                document.body.appendChild(confetti);
                
                // 动画结束后移除 DOM
                setTimeout(() => {
                    confetti.remove();
                }, 3000);
            }
        }

        // ================= 事件监听 =================
        document.getElementById('add-btn').addEventListener('click', addTask);
        inputEl.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') addTask();
        });

        // 启动
        init();

    </script>
</body>
</html>